<template>
  <div id="categoryFilter">
    <el-card style="margin-bottom: 20px">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="分类筛选" name="1">
          <div class="content">
            <el-row>
              <el-col :span="6">
                <div class="colItem">
                  <div class="itemTitle">
                    <div>国别</div>
                    <div style="cursor: pointer" @click="sortChange('country',countrySortFlag)">
                      <i class="el-icon-sort"></i>
                    </div>
                  </div>
                  <div class="itemContent">
                    <div class="listItem" v-for="item in countryList" :key="item.index">
                      <el-popover placement="top-start" trigger="hover" :content="item.label" popper-class="categoryFieldPopover" style="width: 20%">
                        <div slot="reference" class="itemLabel" @click="queryData('country',item.label)">{{item.label}}</div>
                      </el-popover>
                      <div class="itemNum" style="width: 80%">{{item.num}}</div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="colItem">
                  <div class="itemTitle">
                    <div>样品规格</div>
                    <div style="cursor: pointer" @click="sortChange('specification',specificationSortFlag)">
                      <i class="el-icon-sort"></i>
                    </div>
                  </div>
                  <div class="itemContent">
                    <div class="listItem" v-for="item in specificationList" :key="item.index">
                      <el-popover placement="top-start" trigger="hover" :content="item.label" popper-class="categoryFieldPopover" style="width: 50%">
                        <div slot="reference" class="itemLabel" @click="queryData('specification',item.label)">{{item.label}}</div>
                      </el-popover>
                      <div class="itemNum" style="width: 50%">{{item.num}}</div>
                    </div>
                  </div>
                </div>
                </el-col>
              <el-col :span="6">
                <div class="colItem">
                  <div class="itemTitle">
                    <div>生产商</div>
                    <div style="cursor: pointer" @click="sortChange('manufacturer',manufacturerSortFlag)">
                      <i class="el-icon-sort"></i>
                    </div>
                  </div>
                  <div class="itemContent">
                    <div class="listItem" v-for="item in manufacturerList" :key="item.index">
                      <el-popover placement="top-start" trigger="hover" :content="item.label" popper-class="categoryFieldPopover" style="width: 80%">
                        <div slot="reference" class="itemLabel" @click="queryData('manufacturer',item.label)">{{item.label}}</div>
                      </el-popover>
                      <div class="itemNum" style="width: 20%">{{item.num}}</div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="colItem">
                  <div class="itemTitle">
                    <div>入库日期</div>
                    <div style="cursor: pointer" @click="sortChange('inDate',inDateSortFlag)">
                      <i class="el-icon-sort"></i>
                    </div>
                  </div>
                  <div class="itemContent">
                    <div class="listItem" v-for="item in inDateList" :key="item.index">
                      <el-popover placement="top-start" trigger="hover" :content="item.label" popper-class="categoryFieldPopover" style="width: 50%">
                        <div slot="reference" class="itemLabel" @click="queryData('inDate',item.label)">{{item.label}}</div>
                      </el-popover>
                      <div class="itemNum" style="width: 50%">{{item.num}}</div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>
<script>
import { Message } from 'element-ui'
export default {
  props: {
    importDataType: ''
  },
  data() {
    return  {
      superQueryFlag: false, // 查询借用高级查询接口
      activeNames: ['0'],
      countryList: [
        { label: '中国' , num: 2},
        { label: '美国' , num: 2},
      ],
      specificationList: [
        { label: '中国' , num: 2},
        { label: '美国' , num: 2},
      ],
      manufacturerList: [
        { label: '中国' , num: 2},
        { label: '美国' , num: 2},
      ],
      inDateList: [
        { label: '中国' , num: 2},
        { label: '美国' , num: 2},
      ],
      // 排序：升序 true false；
      countrySortFlag: false, 
      specificationSortFlag: false,
      manufacturerSortFlag: false,
      inDateSortFlag: false,
    }
  },
  mounted() {

  },
  created() {
    this.queryNum()
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    // 查询数量
    queryNum() {
      this.countryList = []
      this.specificationList = []
      this.manufacturerList = []
      this.inDateList = []
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/category/getInfo',
        method: 'GET',
        params: {
          type: this.importDataType,
        }
      }).then(res => {
        console.log(res.data.data)
        for (let property in res.data.data.countryGroup){
          this.countryList.push(new Object({
            label: property,
            num: res.data.data.countryGroup[property]
          }))
        }
        for (let property in res.data.data.specificationGroup){
          this.specificationList.push(new Object({
            label: property,
            num: res.data.data.specificationGroup[property]
          }))
        }
        for (let property in res.data.data.manufacturerGroup){
          this.manufacturerList.push(new Object({
            label: property,
            num: res.data.data.manufacturerGroup[property]
          }))
        }
        for (let property in res.data.data.inDateGroup){
          this.inDateList.push(new Object({
            label: property,
            num: res.data.data.inDateGroup[property]
          }))
        }
        this.inDateList.reverse()
        this.sortChange('country',this.countrySortFlag)
        this.sortChange('specification',this.specificationSortFlag)
        this.sortChange('manufacturer',this.manufacturerSortFlag)
      })
    },
    // 点击后查询————调用高级查询的接口
    queryData(queryName,queryContent) {
      var queryCondition =''
      if (queryName == 'inDate') {
        queryCondition = '以..开始'
      } else {
        queryCondition = '等于'
      }
      var queryArray = []
      queryArray.push(
        new Object({
          name: queryName,
          condition: queryCondition,
          content: queryContent
        })
      )
      if (queryArray.length == 0) {
        return false
      }
      this.superQueryFlag = true
      this.$emit('getInquiryResult', queryArray, 'and')
    },
    // 排序
    sortChange(sortArray,flag) {
      console.log('sortArray-----------',flag, sortArray)
      var arr = []
      var sortFlag = flag
      if (sortArray == 'country') {
        arr = this.countryList
        this.countrySortFlag = !this.countrySortFlag
      } else if (sortArray == 'specification') {
        arr = this.specificationList
        this.specificationSortFlag = !this.specificationSortFlag
      } else if (sortArray == 'manufacturer') {
        arr = this.manufacturerList
        this.manufacturerSortFlag = !this.manufacturerSortFlag
      } else if (sortArray == 'inDate') {
        arr = this.inDateList
        this.inDateSortFlag = !this.inDateSortFlag
        this.inDateList.reverse()
        return
      }
      if(sortFlag == true) { // 升序
        var compare = function (obj1, obj2) {
          var val1 = obj1.num;
          var val2 = obj2.num;
          if (val1 < val2) { return -1; } 
          else if (val1 > val2) { return 1; } 
          else { return 0; }            
        } 
      } else { // 降序
        var compare = function (obj1, obj2) {
          var val1 = obj1.num;
          var val2 = obj2.num;
          if (val1 < val2) { return 1; } 
          else if (val1 > val2) { return -1; } 
          else { return 0; }            
        }
      }
      arr.sort(compare)
    },
  },
}
</script>
<style lang="less">
.categoryFieldPopover {
  margin: 0 0 12px;
  padding: 10px;
  // background: #303133;
  transform-origin: center bottom;
  // color: #FFF;
  font-size: 12px;
  display: flex;
  text-align: center;
  min-width: 20px;
  /deep/.popper__arrow {
    // background: #303133;
    // color: #303133;
  }
  /deep/.popper__arrow::after {
    // background: #303133;
    // color: #303133;
  }
}
.categoryFieldPopover::after {
  // background: #303133;
}
</style>
<style lang="less" scoped>
#categoryFilter {
  /deep/div#el-collapse-head-6934{
    font-size: 16px;
    font-weight: 500;
    padding-left: 20px;
    padding-top: 20px;
    height: 36px;
    line-height: 16px;
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 0;
  }
  .content {
    /deep/.el-col-6 {
      padding: 5px;
      border-radius: 6px;
      border: 1px solid #ddd;
      margin: 1%;
      width: 23%;
    }
    .itemTitle {
      height: 36px;
      line-height: 16px;
      padding: 10px 10px 10px 5px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
    }
    .itemContent {
      padding-top: 6px;
      height: 198px;
      overflow-y: auto;
      .listItem {
        display: flex;
        width: 100%;
        padding-left: 10px;
        height: 24px;
        line-height: 24px;
      }
      .itemLabel {
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .itemNum {
        text-align: center;
      }
    }
  }
}
</style>